import React, { useState } from "react";
import { Button, Checkbox, Form, Input } from "antd";
import "./index.scss";
import axios from "../../api/request";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { setuserInfo } from "../../store/userInfo/UserInfo";
// import { message, Space } from "antd";
function Login() {
//   const [messageApi, contextHolder] = message.useMessage();
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const onFinish = (values) => {
    console.log("Success:", values);
    axios.post("/login", values).then((res) => {
      console.log(res);
      if (res.status == 200) {
        dispatch(setuserInfo(res.data));
   
        navigate("/home");
        
      }
    });
  };
  const [tu,settu] = useState('https://img0.baidu.com/it/u=3720667037,2043189645&fm=253&fmt=auto&app=120&f=JPEG?w=510&h=500')
  
  const asd = ()=>{
    settu('https://img2.baidu.com/it/u=3558593331,1735352382&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500')
  }
  
  return (
    <div className="los">
      <h2 onClick={()=>{
        asd()
      }}
      >图片换一换</h2>
      <img src={tu} alt="" />
      <div className="lod">
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            // label="Username"
            name="account"
            rules={[{ required: true, message: "不能为空!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            // label="Password"
            name="password"
            rules={[
              { required: true, message: "不能为空!" },
              { pattern: /^\w{6,12}$/, message: "请输入6-12位" },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item label={null}>
            <Button type="primary" htmlType="submit" style={{ width: "200px" }}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default Login;
